<template>
  <view class="index">
    <view v-if="!isStart" class="home">
      <view class="hero">
        <view class="hero-content">
          <text class="hero-title">MBTI</text>
          <text class="hero-subtitle">性格类型测试</text>
          <text class="hero-desc">发现真实的自己，探索性格潜能</text>
        </view>
        <view class="hero-image">
          <image class="banner" :src="banner" mode="aspectFill"></image>
        </view>
      </view>

      <view class="features-grid">
        <view class="feature-card">
          <view class="feature-content">
            <text class="feature-title">深度分析</text>
            <text class="feature-desc">全方位解析性格特征</text>
          </view>
        </view>
      </view>

      <view class="test-info">
        <view class="info-header">
          <text class="info-title">测试说明</text>
          <text class="info-subtitle">了解测试流程</text>
        </view>
        <view class="info-steps">
          <view class="step-item">
            <view class="step-number">1</view>
            <view class="step-content">
              <text class="step-title">完成测试</text>
              <text class="step-desc">5个问题，约3分钟</text>
            </view>
          </view>
          <view class="step-item">
            <view class="step-number">2</view>
            <view class="step-content">
              <text class="step-title">获取结果</text>
              <text class="step-desc">了解你的性格类型</text>
            </view>
          </view>
          <view class="step-item">
            <view class="step-number">3</view>
            <view class="step-content">
              <text class="step-title">深度解析</text>
              <text class="step-desc">探索性格特征与优势</text>
            </view>
          </view>
        </view>
      </view>

      <view class="start-section">
        <button class="start-btn" @click="goStart">
          <text class="btn-text">开始测试</text>
          <text class="btn-icon">→</text>
        </button>
        <text class="disclaimer">本测试结果仅供参考，帮助您更好地认识自己</text>
      </view>

      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
    </view>

    <view v-else class="quiz">
      <view v-if="isFinish" class="finish">
        <view v-if="isLock" class="unlock">
          <view class="unlock-content">
            <view class="unlock-icon">🎉</view>
            <text class="unlock-title">测试完成</text>
            <text class="unlock-subtitle">即将揭晓你的性格类型</text>
            <button class="unlock-btn" @click="submit">
              查看详细分析
            </button>
          </view>
        </view>
        <view v-else class="result">
          <view class="result-header">
            <text class="result-title">你的MBTI性格类型</text>
            <text class="result-type">{{ curResult.title }}</text>
          </view>
          <view class="result-content">
            <text class="result-desc">{{ curResult.desc }}</text>
          </view>
          <button class="restart-btn" @click="goHome">
            重新测试
          </button>
        </view>
      </view>

      <view v-else class="quiz-content">
        <view class="quiz-progress">
          <view class="progress-info">
            <text class="progress-text">问题 {{ curIndex + 1 }}/{{ dataList.length }}</text>
            <text class="progress-percent">{{ Math.round(((curIndex + 1) / dataList.length) * 100) }}%</text>
          </view>
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: `${((curIndex + 1) / dataList.length) * 100}%` }"></view>
          </view>
        </view>

        <view class="question-card">
          <text class="question-text">{{ curQuizInfo.question }}</text>
          <view class="answer-list">
            <view
              class="answer-item"
              v-for="(item, index) in curQuizInfo.answerList"
              :key="index"
              :class="{ selected: item.select }"
              @click="selectAnswer(index)"
            >
              <text class="answer-text">{{ item.answer }}</text>
            </view>
          </view>
        </view>
      </view>

      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
import banner from "./static/mbti_banner.jpg";
import { mbtiDataList, mbtiResult } from "./static/mbti.js";
export default {
  data() {
    return {
      isStart: false,
      banner: banner,
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      curQuizInfo: {
        question: "",
        score: 0,
        answerList: [],
      },
      curResult: {
        level: null,
        min: null,
        max: null,
        title: "",
        desc: "",
      },
      isLock: true,
      isFinish: false,
      curIndex: 0,
      totalScore: 0,
      dataList: [],
      resultList: [],
      resultMap: {},
      mbtiTotalScore: {
        E: 0,
        I: 0,
        S: 0,
        N: 0,
        T: 0,
        F: 0,
        J: 0,
        P: 0,
      },
      mbtiResult: mbtiResult,
    };
  },
  methods: {
    goStart() {
      this.initQuiz();
      this.isStart = true;
    },
    initQuiz() {
      let newDataList = mbtiDataList;
      console.log("mbtiResult", mbtiResult, mbtiDataList);
      for (let i in newDataList) {
        for (let j in newDataList[i].answerList) {
          newDataList[i].answerList[j].select = false;
        }
      }
      this.dataList = newDataList;
      if (this.dataList.length > 0) {
        this.curQuizInfo = this.dataList[0];
      }
    },
    submit() {
      showAdConfirmModal(() => {
        try {
          adVideoShow(() => {
            this.unLock();
          });
        } catch (error) {
          this.unLock();
        }
      });
    },
    // 解锁
    unLock() {
      let curType = "";
      if (this.mbtiTotalScore.E > this.mbtiTotalScore.I) {
        curType += "E";
      } else {
        curType += "I";
      }
      if (this.mbtiTotalScore.S > this.mbtiTotalScore.N) {
        curType += "S";
      } else {
        curType += "N";
      }
      if (this.mbtiTotalScore.T > this.mbtiTotalScore.F) {
        curType += "T";
      } else {
        curType += "F";
      }
      if (this.mbtiTotalScore.J > this.mbtiTotalScore.P) {
        curType += "J";
      } else {
        curType += "P";
      }
      if (this.mbtiResult[curType]) {
        this.curResult.title = this.mbtiResult[curType].code;
        this.curResult.desc = this.mbtiResult[curType].desc;
      }
      this.isLock = false;
    },
    selectAnswer(index) {
      let curAnswer = this.dataList[this.curIndex].answerList;
      for (let i in curAnswer) {
        curAnswer[i].select = false;
      }
      curAnswer[index].select = true;
      for (let i in this.mbtiTotalScore) {
        if (i == curAnswer[index].value) {
          this.mbtiTotalScore[i] += 1;
        }
      }
      console.log("mbtiTotalScore", this.mbtiTotalScore);
      if (this.curIndex < this.dataList.length - 1) {
        setTimeout(() => {
          this.curIndex += 1;
          this.curQuizInfo = this.dataList[this.curIndex];
        }, 1000);
      } else {
        setTimeout(() => {
          this.isFinish = true;
        }, 1000);
      }
    },
    back() {
      if (this.curIndex > 0) {
        this.curIndex -= 1;
      } else {
        this.isStart = false;
      }
    },
    goHome() {
      this.isStart = false;
    },
  },
};
</script>

<style scoped lang="scss">
.index {
  min-height: 100vh;
  background: #f8f9fa;
}

.home {
  padding: 0;
  
  .hero {
    background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
    padding: 60rpx 40rpx;
    color: #fff;
    position: relative;
    overflow: hidden;
    
    .hero-content {
      position: relative;
      z-index: 2;
      
      .hero-title {
        font-size: 72rpx;
        font-weight: 800;
        display: block;
        margin-bottom: 20rpx;
        letter-spacing: 4rpx;
      }
      
      .hero-subtitle {
        font-size: 36rpx;
        font-weight: 600;
        display: block;
        margin-bottom: 16rpx;
        opacity: 0.9;
      }
      
      .hero-desc {
        font-size: 28rpx;
        opacity: 0.8;
        display: block;
      }
    }
    
    .hero-image {
      position: absolute;
      right: -100rpx;
      bottom: -100rpx;
      width: 400rpx;
      height: 400rpx;
      opacity: 0.1;
      
      .banner {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  
  .features-grid {
    margin: -40rpx 30rpx 40rpx;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20rpx;
    position: relative;
    z-index: 3;
    
    .feature-card {
      background: #fff;
      padding: 30rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      
      .feature-icon {
        font-size: 48rpx;
        margin-right: 20rpx;
      }
      
      .feature-content {
        flex: 1;
        
        .feature-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #2c3e50;
          display: block;
          margin-bottom: 8rpx;
        }
        
        .feature-desc {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
  
  .test-info {
    margin: 0 30rpx 40rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    
    .info-header {
      text-align: center;
      margin-bottom: 40rpx;
      
      .info-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #2c3e50;
        display: block;
        margin-bottom: 12rpx;
      }
      
      .info-subtitle {
        font-size: 26rpx;
        color: #666;
      }
    }
    
    .info-steps {
      .step-item {
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .step-number {
          width: 60rpx;
          height: 60rpx;
          background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 32rpx;
          font-weight: 600;
          margin-right: 20rpx;
        }
        
        .step-content {
          flex: 1;
          
          .step-title {
            font-size: 30rpx;
            font-weight: 500;
            color: #2c3e50;
            display: block;
            margin-bottom: 8rpx;
          }
          
          .step-desc {
            font-size: 24rpx;
            color: #666;
          }
        }
      }
    }
  }
  
  .start-section {
    margin: 0 30rpx 40rpx;
    text-align: center;
    
    .start-btn {
      background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
      color: #fff;
      padding: 30rpx 0;
      border-radius: 16rpx;
      font-size: 34rpx;
      font-weight: 600;
      margin-bottom: 20rpx;
      box-shadow: 0 8rpx 20rpx rgba(52, 152, 219, 0.2);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      .btn-text {
        margin-right: 10rpx;
      }
      
      .btn-icon {
        transition: transform 0.3s ease;
      }
      
      &:active .btn-icon {
        transform: translateX(6rpx);
      }
    }
    
    .disclaimer {
      font-size: 24rpx;
      color: #95a5a6;
    }
  }
}

.quiz {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 30rpx;
  
  .quiz-progress {
    margin-bottom: 30rpx;
    
    .progress-info {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16rpx;
      
      .progress-text {
        font-size: 28rpx;
        color: #2c3e50;
        font-weight: 500;
      }
      
      .progress-percent {
        font-size: 28rpx;
        color: #3498db;
        font-weight: 600;
      }
    }
    
    .progress-bar {
      height: 8rpx;
      background: #e0e0e0;
      border-radius: 4rpx;
      overflow: hidden;
      
      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #3498db 0%, #2c3e50 100%);
        transition: width 0.3s ease;
      }
    }
  }
  
  .question-card {
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
    
    .question-text {
      font-size: 34rpx;
      color: #2c3e50;
      font-weight: 500;
      line-height: 1.6;
      margin-bottom: 40rpx;
      display: block;
    }
    
    .answer-list {
      .answer-item {
        background: #f8f9fa;
        padding: 30rpx;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        transition: all 0.3s ease;
        border: 2rpx solid transparent;
        
        &:active {
          transform: scale(0.98);
        }
        
        &.selected {
          background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
          border-color: #3498db;
          box-shadow: 0 4rpx 12rpx rgba(52, 152, 219, 0.2);
          
          .answer-text {
            color: #fff;
          }
        }
        
        .answer-text {
          font-size: 30rpx;
          color: #2c3e50;
          line-height: 1.5;
        }
      }
    }
  }
  
  .finish {
    .unlock {
      background: #fff;
      border-radius: 20rpx;
      padding: 60rpx 40rpx;
      text-align: center;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      
      .unlock-content {
        .unlock-icon {
          font-size: 80rpx;
          margin-bottom: 30rpx;
        }
        
        .unlock-title {
          font-size: 40rpx;
          color: #2c3e50;
          font-weight: 600;
          display: block;
          margin-bottom: 16rpx;
        }
        
        .unlock-subtitle {
          font-size: 28rpx;
          color: #666;
          display: block;
          margin-bottom: 40rpx;
        }
        
        .unlock-btn {
          background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
          color: #fff;
          padding: 30rpx 0;
          border-radius: 16rpx;
          font-size: 32rpx;
          font-weight: 600;
          box-shadow: 0 8rpx 20rpx rgba(52, 152, 219, 0.2);
          transition: all 0.3s ease;
          
          &:active {
            transform: scale(0.98);
          }
        }
      }
    }
    
    .result {
      background: #fff;
      border-radius: 20rpx;
      padding: 40rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      
      .result-header {
        text-align: center;
        margin-bottom: 40rpx;
        
        .result-title {
          font-size: 36rpx;
          color: #2c3e50;
          font-weight: 600;
          display: block;
          margin-bottom: 20rpx;
        }
        
        .result-type {
          font-size: 48rpx;
          color: #3498db;
          font-weight: 700;
          display: block;
        }
      }
      
      .result-content {
        .result-desc {
          font-size: 28rpx;
          color: #666;
          line-height: 1.8;
          display: block;
          margin-bottom: 40rpx;
        }
      }
      
      .restart-btn {
        background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
        color: #fff;
        padding: 30rpx 0;
        border-radius: 16rpx;
        font-size: 32rpx;
        font-weight: 600;
        box-shadow: 0 8rpx 20rpx rgba(52, 152, 219, 0.2);
        transition: all 0.3s ease;
        
        &:active {
          transform: scale(0.98);
        }
      }
    }
  }
}

.pub_ad_banner {
  margin: 30rpx 0;
  border-radius: 16rpx;
  overflow: hidden;
}
</style>

